<template>
	<div class="main">
		<div class="title">
			服务管理
		</div>
		<div class="search">
			<div class="input">
				<span>服务名称：</span>
				<el-input v-model="pubServiceName" placeholder="请输入服务名称" maxlength="8" clearable />
			</div>
			<div class="input" style="width: 270px;">
				<span>服务类型：</span>
				<el-select v-model="pubServiceType" placeholder="请选择服务类型">
					<el-option v-for="(item, index) of serviceType" :label="item.itemName" :value="item.itemName" />
				</el-select>
			</div>
			<div class="input" style="width: 270px;">
				<span>是否推荐：</span>
				<el-select v-model="recommend" placeholder="请选择是否推荐">
					<el-option label="推荐" value="推荐" />
					<el-option label="不推荐" value="不推荐" />
				</el-select>
			</div>
			<div class="input" style="width: 270px;">
				<span>审核状态：</span>
				<el-select v-model="auditStatus" placeholder="请选择审核状态">
					<el-option label="待审核" value="0" />
					<el-option label="审核通过" value="2" />
					<el-option label="审核驳回" value="3" />
				</el-select>
			</div>
		</div>
		<div class="search">
			<!-- <el-button type="primary" @click="getPubServiceList">新增</el-button> -->
			<el-button type="primary" @click="searchServiceList">查询</el-button>
			<el-button type="primary" @click="clearSearch">重置</el-button>
		</div>
		<el-table class="custom-table" :data="table.pubServerList" style="width: 100%;">
			<el-table-column label="服务名称" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.serviceName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="宣传图" width="150">
				<template #default="scope">
					<img :src="imgPath + scope.row.publicityMap" style="width: 100px; height: 60px; border-radius: 10px;" />
				</template>
			</el-table-column>
			<el-table-column label="服务类型" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.serviceType }}</span>
				</template>
			</el-table-column>
			<el-table-column label="服务简介" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.serviceInformation }}</span>
				</template>
			</el-table-column>
			<el-table-column label="信义分" width="100">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.score }}</span>
				</template>
			</el-table-column>
			<el-table-column label="所属企业" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.compName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请量" width="100">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.applicationCount }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="是否推荐" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.recommend == 'N' ? '不推荐' : '推荐' }}</span>
				</template>
			</el-table-column>

			<el-table-column label="审核状态" width="150">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.auditStatus }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" width="200">
				<template #default="scope">
					<span class="ellipsis">{{ scope.row.createDate }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="350">
				<template #default="scope">
					<el-row>
						<el-button :type="scope.row.recommend == 'N' ? 'primary' : 'warning'"
							@click="updateRecommend(scope.row.id)">{{ scope.row.recommend == 'N' ? '推&nbsp&nbsp&nbsp荐' : '不推荐' }}</el-button>
						<el-button type="primary" :disabled="scope.row.auditStatus == '待审核' ? false : true "
							@click="updatePubServiceStatus(scope.row.id, '2')">通过</el-button>
						<el-button type="warning" :disabled="scope.row.auditStatus == '待审核' ? false : true "
							@click="reject(scope.row.id, '3', this.reason)">驳回</el-button>
						<el-button type="danger" @click="deleteService(scope.row.id)">删除</el-button>
					</el-row>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination :current-page="page" :page-size="10" :pager-count="11" layout="prev, pager, next"
				:total="table.total" @current-change="pageChange" />
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex'


	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	export default {
		data() {
			return {
				table: {
					total: 0,
					pubServerList: []
				},
				imgPath: "http://localhost:8080/images/",
				// 新增状态码到中文描述的映射
				auditStatusMap: {
					'2': '审核通过',
					'3': '审核驳回',
					'1': '审核中',
					'0': '待审核'
				},
				page: 1,

				pubServiceName: "",
				pubServiceType: "",
				recommend: "",
				auditStatus: "",
				defaultPubServiceName: "",
				defaultPubServiceType: "",
				defaultRecommend: "",
				defaultAuditStatus: "",
				serviceType: []
			}
		},

		methods: {
			//映射
			...mapActions('pubService', ['pubServiceList', 'updateAuditStatus', 'deleteServiceStore', 'updateRecommendStore', 'getServiceTypeStore']),

			// 转换状态码方法
			convertAuditStatus(status) {
				return this.auditStatusMap[status] || '未知状态';
			},

			/**
			 * 查询服务列表
			 */

			async getPubServiceList() {
				const res = await this.pubServiceList({
					page: this.page,
					pubServiceName: this.defaultPubServiceName,
					pubServiceType: this.defaultPubServiceType,
					recommend: this.defaultRecommend,
					auditStatus: this.defaultAuditStatus,
				})
				if (res.successful) {
					this.table.total = res.data.total
					// 遍历更新状态码为中文描述
					this.table.pubServerList = res.data.rows.map(row => ({
						...row,
						auditStatus: this.convertAuditStatus(row.auditStatus
							.toString()) // 假设 auditStatus 是数字，这里转换为字符串进行匹配
					}));
				}
			},

			/**
			 * 页码改变时查询
			 */
			pageChange(newPage) {
				this.page = newPage;
				this.getPubServiceList(); // 每当页码改变时，重新加载数据
			},

			/**
			 * 清除搜索框
			 */
			clearSearch() {
				this.pubServiceName = ""
				this.pubServiceType = ""
				this.recommend = ""
				this.auditStatus = ""
			},


			/**
			 * 点击查询
			 */
			searchServiceList() {
				this.defaultPubServiceName = this.pubServiceName
				this.defaultPubServiceType = this.pubServiceType
				this.defaultRecommend = this.recommend
				this.defaultAuditStatus = this.auditStatus
				this.getPubServiceList();
			},


			/**
			 * 改变服务状态
			 */
			async updatePubServiceStatus(id, status, reason) {
				await this.updateAuditStatus({
					id: id,
					status: status,
					reason: reason
				})
				this.getPubServiceList();
			},


			/**
			 * 驳回服务
			 */
			reject(id, status, reason) {
				ElMessageBox.prompt(
						'请输入驳回原因',
						'Warning', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(async ({
						value
					}) => {

						await this.updatePubServiceStatus(id, status, value)

						ElMessage({
							type: 'success',
							message: '驳回成功！',
						})
					})
					.catch(() => {})
			},

			/**
			 * 删除服务
			 */
			deleteService(id) {

				ElMessageBox.confirm(
						'是否删除?',
						'Warning', {
							confirmButtonText: '确认',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(async () => {
						await this.deleteServiceStore({
							id: id
						})
						await this.getPubServiceList();
						ElMessage({
							type: 'success',
							message: '删除成功！',
						})
					})
					.catch(() => {
					})
			},
			
			/**
			 * 更新是否推荐
			 */
			async updateRecommend(id) {
			
				await this.updateRecommendStore({
					id: id
				})
				await this.getPubServiceList();
			
			},
			
			async getServiceType(){
				const res = await this.getServiceTypeStore()
				if (res.successful) {
					this.serviceType = res.data
				}
			}
		},

		//在挂载开始之前被调用
		//获取所有服务信息
		beforeMount() {
			this.getPubServiceList()
			this.getServiceType()
		}
	}
</script>

<style scoped>
	.main {
		width: 2000px;
		height: 1120px;
		margin-left: 400px;
		margin-top: 50px;
		display: flex;
		flex-direction: column;
	}

	/* 新增的样式类用于处理文本溢出 */
	.ellipsis {
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏超出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		cursor: default;
	}

	.custom-table {
		height: 890px;
	}

	.page {
		margin-top: 10px;
		margin-left: 550px;
	}

	.title {
		color: #666;
		font-size: 15px;
		margin-bottom: 20px;
	}

	.search {
		margin-bottom: 30px;
		display: flex;
		flex-direction: row;
	}

	.input {
		width: 300px;
		display: flex;
		justify-content: center;
		color: #666;
		font-size: 12px;
		margin-right: 50px;
	}

	.input span {
		width: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search .el-button {
		margin-right: 20px;
	}
</style>